<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			.wrapper {
				position: relative;
				overflow: hidden;
				width: 400px;
				height: 260px;
				background-color: gold;
				margin: 100px auto;
				border: 1px solid #CCC;
			}
			
			#left li a {
				display: block;
				width: 100px;
				height: 50px;
				background-color: burlywood;
				text-align: center;
				line-height: 50px;
				color: #000;
				border: 1px solid #CCC;
			}
			#left li a:hover {
				background-color: red;
			}
			#content {
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
		<script>
			$(function() {
				//鼠标经过左侧li 
				$("#left li").mouseover(function() {
					//获得当前li的索引号
					var index = $(this).index();
					//让右侧的盒子相应的图片显示出来
					$("#content div").eq(index).show();
					//其余的盒子里的图片隐藏（其他兄弟隐藏） 排他思想
					$("#content div").eq(index).siblings().hide();
				});
			});
		</script>
	</head>
	<body>
		<div class="wrapper">
			<ul id="left">
				<li><a href="#">皮衣</a></li>
				<li><a href="#">牛仔裤</a></li>
				<li><a href="#">女鞋</a></li>
				<li><a href="#">女包</a></li>
				<li><a href="#">毛衣</a></li>
			</ul>
			<div id="content">
				<div><img src="images/皮衣.jpg" width="300px" height="260px" /></div>
				<div><img src="images/牛仔裤.jpg" width="300px" height="260px" /></div>
				<div><img src="images/女靴.jpg" width="300px" height="260px" /></div>
				<div><img src="images/女包.jpg" width="300px" height="260px" /></div>
				<div><img src="images/毛衣.jpg" width="300px" height="260px" /></div>
			</div>
		</div>
	</body>
</html>
